//#region 
/* 
  1.导入 vue-router=================================================================
  createRouter 该方法是用来创建路由用的
  createWebHistory 是用来创建路由模式用的(History)
  createWebHashHistory 用来创建路由模式用的(Hash)

  高频面试题:
  History:路径前面会使用 / 开头,一般是要和后端配合使用进行页面跳转,如果配合不当容易产生404页面,路径看起来会比较美观.

  Hash:前面会有 # 号键,无需后端配合, 使用方便
*/
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
// 导入home组件
import HomeView from '../views/HomeView.vue'

//路由规则配置
const routes = [
  {
    //访问时的路径
    path: '/',
    //路由的别名
    name: 'home', 
    //当访问到对应的路径时候,会展示的组件
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    //#region 
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //#endregion
    //路由的懒加载,什么时候用到什么时候再加载
    //对于一些不确定立即显示的页面选择路由懒加载
    //对于一级页面不要用懒加载,对于不确定立即显示的页面选择懒加载
    component: () => import('../views/AboutView.vue')
  }
]

//创建一个router实例=====================================================
const router = createRouter({
  //设置路由模式
  history: createWebHashHistory (import.meta.env.BASE_URL),
  //路由规则定义
  routes
})

//导出 router 实例===========================================================
export default router
//#endregion
